<template>
  <div class="sz-demo sz-demo-ellipsis">
    <!-- 居中省略 -->
    <template>
      <el-divider content-position="left"><b>中间省略文本示例</b></el-divider>
      <h5>末尾保留4个字</h5>
      <section>
        <sz-ellipsis :content="text" type="center"/>
      </section>
      <h5>末尾保留10个字</h5>
      <section>
        <sz-ellipsis :content="text" type="center" :suffixLength="10"/>
      </section>
    </template>

    <!-- 末尾省略 -->
    <template>
      <el-divider content-position="left"><b>末尾省略文本示例</b></el-divider>
      <h5>单行省略</h5>
      <section>
        <sz-ellipsis :content="text"/>
      </section>
      <h5>多行省略</h5>
      <section>
        <sz-ellipsis :content="text" :lineClamp="2"/>
      </section>
    </template>

    <!-- 展开省略 -->
    <template>
      <el-divider content-position="left"><b>可展开收起的文本示例</b></el-divider>
      <h5>单行省略</h5>
      <section>
        <sz-ellipsis :content="text" type="fold"/>
      </section>
      <h5>多行省略</h5>
      <section>
        <sz-ellipsis :content="text" type="fold" :lineClamp="3"/>
      </section>
      <h5>自定义字号和行高</h5>
      <section>
        <sz-ellipsis :content="text" type="fold" :lineClamp="3" :font-size="16" :lineHeight="24"/>
      </section>
    </template>
  </div>
</template>

<script>
import { SzEllipsis } from '@/components'
export default {
  name: 'SzEllipsisDemo',
  components: { SzEllipsis },
  data() {
    return {
      text: '在余华的眼里，“任何一个写作者同时也是读者，写作者必须重视自己读者的身份。正是在阅读很多经典作品时带来的感受，才会不断纠正自己在写作过程中的错误。”“我觉得自己二十年来最大的收获就是不断地去阅读经典作品，我们应该相信历史和前人的阅读所留下来的作品，这些作品都是经过了时间的考验，阅读它们不会让我们上当，因为它们是人类智慧的结晶和人类灵魂的漫长旅程……。”余华阅读过众多外国作家的作品，这些作家的名字罗列下来将会很长。如但丁、莎士比亚、川端康成、卡夫卡、福克纳、司汤达、格里耶、巴尔扎克、海涅、尤瑟纳尔、马尔克斯、陀思妥耶夫斯基、博尔赫斯、普鲁斯特、霍桑、海明威、茨威格、舒尔茨、艾萨克·辛格、米兰·昆德拉、克莱恩、布尔加科夫、三岛由纪夫、樋口一叶等。余华并没有因阅读的丰富而手足无措，他反而能够博采众长，将诸多作家的叙述技巧结合其自己的理解转化成满具自身风格和特质的创作，这也正是余华及其作品的意义。'
    }
  }
}
</script>

<style lang="scss" scoped>
  .sz-demo-ellipsis {
    h5 {
      margin: 1% 20%;
    }
    section {
      background-color: #f0f2f5;
    }
  }
</style>